<template>
	<div>
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>
					<i class="el-icon-lx-cascades"></i> 商品列表
				</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="container">
			<div class="handle-box">
				<el-input v-model="query.keyword" placeholder="请输入商品名称!" class="handle-input mr10"></el-input>
				<el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
				<el-button type="primary" @click="addHandlerDialog">添加商品</el-button>
			</div>
			<el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
				<el-table-column prop="goods_id" label="ID" width="55" align="center"></el-table-column>
				<el-table-column prop="goods_name" label="商品名称"></el-table-column>
				<el-table-column label="商品价格">
					<template #default="scope">
						<el-input placeholder="请输入价格" v-model="scope.row.goods_price" @blur="changePrice(scope.row)">
						</el-input>
					</template>
				</el-table-column>
				<el-table-column prop="newtime" label="创建时间"></el-table-column>
				<el-table-column label="头像(查看大图)" align="center">
					<template #default="scope">
						<el-image class="table-td-thumb" :src="scope.row.goods_big_logo"
							:preview-src-list="[scope.row.goods_big_logo]">
						</el-image>
					</template>
				</el-table-column>
				<el-table-column label="是否热销" align="center">
					<template #default="scope">
						<el-tag :type="
                                scope.row.is_promote ==1
                                    ? 'success'
                                    : scope.row.is_promote ==0
                                    ? 'danger'
                                    : ''
                            ">{{ scope.row.is_promote==1?'是':'否' }}</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="状态" align="center">
					<template #default="scope">
						<el-tag :type="
				                scope.row.goods_state ==1
				                    ? 'success'
				                    : scope.row.goods_state ==0
				                    ? 'danger'
				                    : ''
				            ">{{ scope.row.goods_state==1?'是':'否' }}</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="260" align="center">
					<template #default="scope">
						<el-button type="success" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑
						</el-button>
						<el-button type="danger" icon="el-icon-delete" @click="handleDelete(scope.$index, scope.row)">删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pagination">
				<el-pagination background layout="total, prev, pager, next" :current-page="query.pageIndex"
					:page-size="query.pageSize" :total="pageTotal" @current-change="handlePageChange"></el-pagination>
			</div>
		</div>

		<!-- 编辑弹出框 -->
		<el-dialog title="编辑" v-model="editVisible" width="30%">
			<el-form label-width="70px">
				<el-form-item label="用户名">
					<el-input v-model="form.name"></el-input>
				</el-form-item>
				<el-form-item label="地址">
					<el-input v-model="form.address"></el-input>
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="editVisible = false">取 消</el-button>
					<el-button type="primary" @click="saveEdit">确 定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script>
	import {
		ref,
		reactive
	} from "vue";
	import {
		ElMessage,
		ElMessageBox
	} from "element-plus";
	import {
		dbGoodLists,
		dbChangePrice,
		dbSearchGoods
	} from "../../api/good";
	import {
		useRouter
	} from "vue-router";
	export default {
		name: "goodtable",
		setup() {
			const router = useRouter();
			const query = reactive({
				keyword: "",
				pagenum: 1,
				pagesize: 10,
			});
			const tableData = ref([]);
			const pageTotal = ref(0);
			// 获取表格数据
			const getData = async () => {
				const {
					status,
					msg,
					data
				} = await dbGoodLists(query)
				if (status == 200) {
					/*
					 可更改的 ref 对象，此对象只有一个指向其内部值的属性.value
					*/
					tableData.value = data.lists
					pageTotal.value = parseInt(data.total)

				} else {
					ElMessage.error("数据加载失败!");
				}
			};
			getData();
			//----修改商品价格------
			const changePrice = async (goodInfo) => {
				console.log('商品信息::', goodInfo)
				//校验合法价格
				const regPrice = /\d{1,10}(\.\d{1,2})?$/
				if (!regPrice.test(goodInfo.goods_price)) {
					ElMessage.error('请输入合法价格!')
					return false
				}
				//发送ajax
				const {
					status,
					msg,
					data
				} = await dbChangePrice({
					goods_id: goodInfo.goods_id,
					goods_price: goodInfo.goods_price
				})
				if (status == 200) {
					ElMessage.success("改价成功!");
					getData()
				} else {
					ElMessage.error("改价失败!");
				}
			}

			//添加商品跳转
			const addHandlerDialog = () => {
				router.push('/addgood')
			}


			// 查询操作
			const handleSearch = async () => {
				let params = {
					keyword: query.keyword,
					pagesize: query.pagesize,
					pagenum: query.pagenum
				}
				const {
					status,
					msg,
					data
				} = await dbSearchGoods(params)
				if (status == 200) {
					ElMessage.success("查询成功!");
					tableData.value = data.lists
					pageTotal.value = parseInt(data.total)
				} else {
					ElMessage.error("查询失败!");
				}
			};
			// 分页导航
			const handlePageChange = (val) => {
				query.pagenum = val;
				getData();
			};

			// 删除操作
			const handleDelete = (index) => {
				// 二次确认删除
				ElMessageBox.confirm("确定要删除吗？", "提示", {
						type: "warning",
					})
					.then(() => {
						ElMessage.success("删除成功");
						tableData.value.splice(index, 1);
					})
					.catch(() => {});
			};

			// 表格编辑时弹窗和保存
			const editVisible = ref(false);
			let form = reactive({
				name: "",
				address: "",
			});
			let idx = -1;
			const handleEdit = (index, row) => {
				idx = index;
				Object.keys(form).forEach((item) => {
					form[item] = row[item];
				});
				editVisible.value = true;
			};
			const saveEdit = () => {
				editVisible.value = false;
				ElMessage.success(`修改第 ${idx + 1} 行成功`);
				Object.keys(form).forEach((item) => {
					tableData.value[idx][item] = form[item];
				});
			};

			return {
				query,
				tableData,
				pageTotal,
				editVisible,
				form,
				handleSearch,
				handlePageChange,
				handleDelete,
				handleEdit,
				saveEdit,
				//改变商品价格
				changePrice,
				addHandlerDialog
			};
		},
	};
</script>

<style scoped>
	.handle-box {
		margin-bottom: 20px;
	}

	.handle-select {
		width: 120px;
	}

	.handle-input {
		width: 300px;
		display: inline-block;
	}

	.table {
		width: 100%;
		font-size: 14px;
	}

	.red {
		color: #ff0000;
	}

	.mr10 {
		margin-right: 10px;
	}

	.table-td-thumb {
		display: block;
		margin: auto;
		width: 40px;
		height: 40px;
	}
</style>
